<template>
  <div class="page-operate">
    <!-- 位置模块 -->
    <HeadTop></HeadTop>
    <div class="page-head">
      <span class="operate-text">{{title}}</span>
      <div class="operate-box">
        <button @click="back()">关闭</button>
      </div>
    </div>
    <div class="content-area">
      <div class="warn-detail service-detail">
        <div class="tab-title">
          <ul>
            <li v-for="(item,index) in tabList"
                :class="{choose:choosed==index}" @click="change(item.value)">{{item.title}}
            </li>
          </ul>
        </div>
        <div class="tab-content">
          <div class="content1 detail-content">
            <table border="1" bordercolor='#EEE' v-show="choosed==0">
              <tr>
                <td>注册代码</td>
                <td colspan="4" v-text="historyd.elCode"></td>
                <td>电梯类型</td>
                <td colspan="4" v-text="historyd.elTypeName"></td>
              </tr>
              <tr>
                <td>安装地址</td>
                <td colspan="4" v-text="historyd.elArea"></td>
                <td>完成时间</td>
                <td colspan="4" v-text="historyd.repEndDate"></td>
              </tr>
              <tr>
                <td>维修责任人</td>
                <td colspan="4" v-text="historyd.repUserName"></td>
                <td>故障来源</td>
                <td colspan="4" v-text="historyd.troubleFrom"></td>
              </tr>
              <tr>
                <td>状态</td>
                <td colspan="9" v-text="historyd.repStatusName"></td>
              </tr>
            </table>
          </div>
          <div class="content2" v-show="choosed==1">
            <div class="item-box">
              <div class="item">
                <div class="item-icon"></div>
                <div class="item-text">
                  <div class="strong" v-show="historyd.createDate!=null">
                    <b>生成时间:</b>&nbsp;<span>{{historyd.createDate}}</span>
                  </div>
                  <div class="strong" v-show="historyd.repEndDate!=null">
                    <b>完成时间:</b>&nbsp;<span>{{historyd.repEndDate}}</span>
                  </div>
                </div>
              </div>
              <div class="item" v-for="(item, index) in lineList">
                <div class="item-icon"></div>
                <div class="item-text">
                  <span class="deal-line"><b>状态: </b> {{item.brief}}</span><br>
                  <span class="deal-line"><b>操作员: </b> {{item.opUserName}}</span><br>
                  <span class="deal-line"><b>所属单位: </b> {{item.opUserDepName}}</span><br>
                  <span class="deal-line"><b>{{ index == 1 ? '签到时间' : '处理时间'}}: </b> {{item.createDate}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" type="text/scss">
  @import '../../../../style/entry/components/pageChildCommon';
  @import '../../../../style/entry/components/tabDetail';
</style>
<script>
  import moment from 'moment'  // 时间格式转化
  import com from '../../../../js/common' // axios封装引用

  import HeadTop from "../../../../components/head-top/head-top"
  import {getServiceDetail} from '@/api/getData'

  export default {
    name: 'warnDetail',
    components: {
      HeadTop
    },
    data() {
      return {
        title: '查看详情',
        historyd: {
          elCode: '',       // 注册代码
          elTypeName: '',   // 电梯类型
          elArea: '',       // 安装地址
          repEndDate: '',   // 完成时间
          repUserName: '',  // 维修责任人
          troubleFrom: '',  // 故障来源
          repStatusName: '', // 状态
          // 添加工单追踪 新增字段
          createDate: '',
        },
        // 添加工单追踪 新增字段
        tabList: [ // tab切换
          {
            title: '维修详情',
            value: 0
          },
          {
            title: '工单追踪',
            value: 1
          },
        ],
        choosed: 0,
        isShow: true,
        lineList: {}
      }
    },
    created() {
      // 获取地址栏地址
      let uid = this.$route.query.id
      this.curId = uid
      this.getDetailData() // 获取详情信息
    },
    methods: {
      getDetailData() { // 获取详情信息
        let self = this
        getServiceDetail({
          id: this.curId
        }).then(function (data) {

          const curData = data.data.data
          curData.repEndDate = curData.repEndDate ? com.formatDate(curData.repEndDate) : curData.repEndDate    // 完成时间
          curData.createDate = curData.createDate ? moment.unix(curData.createDate / 1000).format('YYYY-MM-DD HH:mm:ss') : curData.createDate //生成时间
          curData.logList.forEach(function (i) {
            i.createDate = i.createDate ? moment.unix(i.createDate / 1000).format('YYYY-MM-DD HH:mm:ss') : i.createDate //签到时间/处理时间
          })
          self.lineList = curData.logList;
          self.historyd = curData;
        }).catch((data) => {
          this.$message.error(data.data.message)
        })
      },
      change(val) { // tab切换
        if (this.choosed != val) {
          this.isShow = !this.isShow
        }
        this.choosed = val
      },
      // 返回上一级
      back() {
        this.$router.go(-1)
      },
    }
  }
</script>
